<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 
    CSS选择器优先级的一般规则是：
1. **!important：** 具有 `!important` 标志的规则具有最高优先级，会覆盖其他所有规则。
2. **内联样式：** 在HTML元素的`style`属性中定义的样式具有较高的优先级。
3. **ID选择器：** ID选择器具有较高的特定性，比类选择器和元素选择器更高。
4. **类选择器、属性选择器和伪类选择器：** 这些选择器有相似的特定性，低于ID选择器。
5. **元素选择器和伪元素选择器：** 元素选择器和伪元素选择器的特定性较低。
6. **通配选择器和子串匹配选择器：** 通配选择器和子串匹配选择器的特定性较低，慎用以避免引起样式冲突。
7. **继承：** 继承的样式具有最低的优先级，它们从父元素继承而来，不会覆盖明确声明样式的规则。

在比较优先级时，按照以下顺序比较：
1. 比较`!important`的数量。
2. 比较ID选择器的数量。
3. 比较类选择器、属性选择器和伪类选择器的数量。
4. 比较元素选择器和伪元素选择器的数量。

选择器权重：
内联样式 1000
id选择器 100
类和伪类选择器 10
元素选择器 1
通配选择器 0
继承样式 没优先级

选择器所有权重相加
分组选择器单独计算
类选择器最高也不会超过id选择器
如果优先级计算后相同，此时则优先使用靠下的样式
   -->
</body>
</html>